<template>
  <div class="ICChain">
    <div class="flex p20 gs-con">
      <div class="gs">
        <mTitle :title="'产业技术链概述'"></mTitle>
        <div class="c-desc m20" v-html="gs"></div>
      </div>
      <div class="line"></div>
      <div class="gs">
        <mTitle :title="'产业技术链统计'"></mTitle>
        <div class="tj">
          <p>
            <span class="span t"> {{ nodeInfo.chainName }} </span>中共有<span
              class="t"
            >
              {{ analysisInfo.nodeCount || "0" }}
            </span>
            个产业节点。
          </p>
          <p>
            产业链覆盖企业<span class="t">{{
              analysisInfo.anCount || "0"
            }}</span
            >家，产业在<span class="t">{{
              (analysisInfo.topProvince || []).join("、")
            }}</span
            >等省市分布较多，其中企业数量较多的产业节点有<span class="t">{{
              (analysisInfo.enterpriseNodesTop || []).join("、") || "0个"
            }}</span
            >。
          </p>
          <p>
            产业链科研专家有
            <span class="t">{{ analysisInfo.inCount || "0" }}</span
            >位，其中专家数量较多的产业节点有<span class="t">{{
              (analysisInfo.personNodesTop || []).join("、") || "0个"
            }}</span
            >。
          </p>
          <p>
            产业链涉及发明专利有<span class="t">{{
              analysisInfo.patentCount || "0"
            }}</span
            >个，其中专利数量较多的产业节点有<span class="t">{{
              (analysisInfo.patentNodesTop || []).join("、") || "0个"
            }}</span
            >。
          </p>
        </div>
      </div>
    </div>

    <div class="p20" v-show="showOrHideTC">
      <mTitle :title="'技术链'"></mTitle>
      <div class="m20">
        <TechChain
          :tabLabel="nodeInfo.chainName"
          :status="dagreStatus"
          @showOrHideNode="showOrHideNode"
          @clickNode="clickNode"
          @rightClick="rightClick"
        ></TechChain>
      </div>
    </div>
    <div class="p20" v-show="showOrHideDC">
      <mTitle :title="'产业链条'"></mTitle>
      <div class="m20">
        <DagreChain
          :status="techStatus"
          :tabLabel="nodeInfo.chainName"
          @showOrHideNode="showOrHideNode"
          @clickNode="clickNode"
          @rightClick="rightClick"
        ></DagreChain>
      </div>
    </div>
    <div class="m20" v-show="selectNodeInfo.name">
      <p>
        选中节点：<span class="nn">{{ selectNodeInfo.name }}</span>
      </p>
    </div>
    <div class="flex p20 gs-con">
      <div class="gs">
        <mTitle :title="'产业技术相关企业'"></mTitle>
        <el-table :data="qyTableData" style="width: 100%">
          <el-table-column prop="name" label="公司名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="province_code" label="地区" width="150">
            <template #default="scope">
              <!-- {{ codeToZh(scope.row.country) }} -->
              {{ provinceToZh(scope.row.province_code) }}
            </template>
          </el-table-column>
          <el-table-column prop="regist_capi" label="公司规模" width="150">
          </el-table-column>
        </el-table>
        <p class="more" v-show="qyTableData.length">
          <span class="">------</span>
          <span class="loadMore" @click="loadMore('second')">加载更多</span>
          <span>------</span>
        </p>
      </div>
      <div class="line"></div>
      <div class="gs">
        <p class="t">相关企业：{{ qyTotal }}家</p>
        <div
          :id="mapInfo.id"
          :style="{
            width: '100%',
            height: chartWH.h,
          }"
        ></div>
      </div>
    </div>
    <div class="flex p20 gs-con">
      <div class="gs">
        <mTitle :title="'产业技术相关专利'"></mTitle>
        <el-table :data="fmTableData" style="width: 100%">
          <el-table-column prop="apn" label="申请号" width="170">
          </el-table-column>
          <el-table-column prop="ttl" label="专利名" show-overflow-tooltip>
            <template #default="scope">
              <p class="tit">
                {{ scope.row.ttl_zh || scope.row.ttl || scope.row.ttl_en }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="nd" label="专利所属国" width="100">
            <template #default="scope">
              {{ codeToZh(scope.row.nd) }}
            </template>
          </el-table-column>
        </el-table>
        <p class="more" v-show="fmTableData.length">
          <span class="">------</span>
          <span class="loadMore" @click="loadMore('first')">加载更多</span>
          <span>------</span>
        </p>
      </div>
      <div class="line"></div>
      <div class="gs">
        <p class="t">相关专利：{{ patentTotal }}件</p>
        <div
          :id="patentInfo.id"
          :style="{
            width: chartWH.w,
            height: chartWH.h,
          }"
        ></div>
      </div>
    </div>
    <div class="flex p20 gs-con">
      <div class="gs">
        <mTitle :title="'产业技术相关专家'"></mTitle>
        <el-table :data="zjTableData" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="100">
            <template #default="scope">
              {{ scope.row.name_zh || scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="所属企业/机构"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row.org_zh || scope.row.org }}
            </template>
          </el-table-column>
          <el-table-column prop="valuation" label="综合评价" width="100">
            <template #default="scope">
              {{ Math.ceil(scope.row.valuation || 0) }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="" label="国籍" width="100"> </el-table-column> -->
        </el-table>
        <p class="more" v-show="zjTableData.length">
          <span class="">------</span>
          <span class="loadMore" @click="loadMore('three')">加载更多</span>
          <span>------</span>
        </p>
      </div>
      <div class="line"></div>
      <div class="gs">
        <!-- <p class="t">相关专家：{{ zjTotal }}位</p> -->
        <div
          :id="numberInfo.id"
          :style="{
            width: chartWH.w,
            height: chartWH.h,
          }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import mTitle from "../components/title.vue";
import DagreChain from "../components/dagreChain.vue";
import TechChain from "../components/techChain.vue";
import pECharts from "./pECharts";
import countryJson from "@/utils/mock/country.json";
import chinaJson from "@/utils/mock/china.json";
const {
  chinaMapChart,
  worldMapChart,
  barChart,
  barEmptyChart,
  barLineChart,
} = pECharts();
export default {
  props: {
    nodeInfo: {
      type: Object,
      default: () => {
        return {
          chainName: "",
          eid: "",
          name: "",
        };
      },
    },
  },
  watch: {
    nodeInfo: {
      handler(newVal) {
        // console.log("newVal", newVal);
        this.selectNodeInfo = JSON.parse(JSON.stringify(newVal));
        this.init();
      },
      deep: true,
      // immediate: true,
    },
  },
  data() {
    return {
      techStatus: true,
      dagreStatus: true,
      showOrHideTC: true,
      showOrHideDC: true,
      gs: "",
      selectNodeInfo: {
        eid: "",
        name: "",
      },
      analysisInfo: {},
      chartWH: {
        w: `100%`,
        h: `400px`,
      },
      qyTableData: [],
      qyTotal: 0,
      mapInfo: {
        id: "enterprise",
        dataInfo: {
          seriesData: [{ value: 1000, name: "台湾省" }],
        },
      },
      fmTableData: [],
      patentTotal: 0,
      patentInfo: {
        id: "patent",
        dataInfo: {
          seriesData: [{ value: 1000, name: "中国" }],
        },
      },
      zjTableData: [],
      zjTotal: 0,
      numberInfo: {
        id: "number",
        dataInfo: {
          xAxisData: [],
          paperData: [],
          patentData: [],
          pjData: [],
        },
      },
    };
  },
  created() {},
  mounted() {
    this.selectNodeInfo = JSON.parse(JSON.stringify(this.nodeInfo));
    this.init();
  },
  methods: {
    showOrHideNode(info) {
      if (info.type == "tech") {
        this.showOrHideTC = info.status;
      } else if (info.type == "dagre") {
        this.showOrHideDC = info.status;
      }
    },
    // 右键--子组件返回
    rightClick(info, type, tabName) {
      let nInfo = {};
      // if (type == "dagre") {
      //   nInfo = {
      //     name: info.label,
      //     eid: info.eid,
      //   };
      // } else if (type == "tech") {
      // }
      nInfo = {
        name: info.label,
        eid: info.eid,
      };
      this.loadMore(tabName, nInfo);
    },
    // 点击选择节点--子组件返回
    clickNode(info, type) {
      // console.log(info, type);
      if (type == "dagre") {
        this.dagreStatus = !this.dagreStatus;
      } else if (type == "tech") {
        this.techStatus = !this.techStatus;
      }
      this.selectNodeInfo = {
        name: info.label,
        eid: info.eid,
      };
      this.getTableList();
      this.getChartList();
    },
    init() {
      this.getOverview();
      this.getTableList();
      this.getChartList();
    },
    // 加载更多
    loadMore(str, nInfo) {
      this.$emit("tabChange", str, nInfo);
    },
    getOverview() {
      // 获取产业技术链概述
      this.$get(this.$Url.chain.getCoreNode, {
        chainName: this.nodeInfo.chainName,
      }).then((res) => {
        const data = res.data;
        // console.log("data", data);
        if (data) {
          data.attributes.forEach((attr) => {
            if (attr.name == "技术释义") {
              this.gs = attr.value;
            }
          });
        }
      });
      // 获取产业技术链统计
      this.$get(this.$Url.chain.industryOverview, {
        // industryName: "疫苗",
        industryName: this.nodeInfo.chainName,
      }).then((res) => {
        let data = res.data;
        this.analysisInfo = data;
      });
    },
    handleExpertData(result) {
      let param = {
        xAxisData: [],
        paperData: [],
        patentData: [],
        pjData: [],
      };
      result.forEach((res) => {
        param.xAxisData.push(res.name_zh || res.name);
        param.patentData.push(res.n_patents);
        param.paperData.push(res.n_pubs);
        param.pjData.push(Math.ceil(res.valuation || 0));
      });
      this.numberInfo.dataInfo = param;
    },
    // 表格数据
    getTableList() {
      const params = {
        ...this.nodeInfo,
        ...this.selectNodeInfo,
        page: 1,
        limit: 6,
        keyword: "",
      };
      // 企业
      this.$post(this.$Url.chain.enterpriseRelNews, params).then((res) => {
        const data = res.data;
        this.qyTableData = data.result;
      });
      // 专利
      this.$post(this.$Url.chain.patentRelNews, params).then((res) => {
        const data = res.data;
        // console.log("----", data);
        this.fmTableData = data.result;
      });
      // 专家
      this.$post(this.$Url.chain.authorRelNews, params).then((res) => {
        const data = res.data;
        // console.log("----", data);
        this.zjTableData = data.result;
        // 专家图表
        this.handleExpertData(data.result);
        barLineChart(this.numberInfo);
      });
    },
    // 国家地区code码转中文
    codeToZh(key) {
      let obj = countryJson.countrs.find((b) => b.code === key);
      // console.log(obj);
      if (obj) {
        return obj.cn || "--";
      } else {
        return "--";
      }
    },
    // 省代码转中文
    provinceToZh(key) {
      // province_code
      let obj = chinaJson.features.find((b) => b.properties.adcode == key);
      return obj?.properties.name || "--";
    },
    // 图表数据
    getChartList() {
      const params = {
        ...this.nodeInfo,
        ...this.selectNodeInfo,
      };
      // 企业
      this.$post(this.$Url.chain.enterpriseChart, params).then((res) => {
        const data = res.data;
        this.qyTotal = data.total;
        this.mapInfo.dataInfo.seriesData = this.handleChartData(
          data.agg,
          false
        );
        // console.log("----", data);
        chinaMapChart(this.mapInfo);
        // worldMapChart(this.mapInfo);
      });
      // 专利
      this.$post(this.$Url.chain.patentChart, params).then((res) => {
        const data = res.data;
        this.patentTotal = data.total;
        this.patentInfo.dataInfo.seriesData = this.handleChartData(
          data.agg,
          true
        );
        // console.log("----", data);
        barChart(this.patentInfo);
      });
      // return;
      // 专家
      // this.$post(this.$Url.chain.authorChart, params).then((res) => {
      //   const data = res.data;
      //   this.zjTotal = data.total;
      //   this.numberInfo.dataInfo = this.handleChartData(data.agg);
      //   // console.log("----", data);
      //   barEmptyChart(this.numberInfo);
      // });
    },
    // 图表数据处理
    handleChartData(agg, change = false) {
      let result = [];
      agg.map((list) => {
        // console.log("key", list.key, this.codeToZh(list.key));
        result.push({
          value: list.doc_count,
          name: change ? this.codeToZh(list.key) : list.key,
        });
      });
      return result;
    },
  },
  components: {
    mTitle,
    DagreChain,
    TechChain,
  },
};
</script>
<style lang="scss" scoped>
.ICChain {
  // padding: 30px;
  .center {
    text-align: center;
  }
  .m20 {
    margin-top: 20px;
  }
  .c-desc {
    text-indent: 2em;
    line-height: 25px;
  }
  .p20 {
    padding: 15px;
    border: 1px solid #dfdfdf;
    margin-top: 20px;
    background-color: #fff;
  }
  .more {
    color: #999;
    text-align: center;
    margin-top: 10px;

    .loadMore {
      margin: 0 10px;
      cursor: pointer;
    }
  }
  .nn {
    font-weight: bold;
    color: $mainColor;
  }
  .gs-con {
    justify-content: space-around;
    .gs {
      width: 49%;
    }
    .tj {
      p {
        margin: 20px 0;
        .span {
          font-size: 18px;
        }
      }
    }
    .line {
      border-right: 1px solid #dfdfdf;
      // margin: 0 15px;
    }
    .t {
      color: $mainColor;
    }
  }
}
</style>
